<template>
  <div class="navBar">
    <div style="margin-left: 20px; color: black; border-bottom: 1px solid #eee">
      快速导航
    </div>
    <div>
      <p v-for="(item, index) in navBar" :key="index">
        <a style="color: black" :href="item.path">{{ item.name }}</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navBar: [
        { name: '文章管理', path: '#/artilce/index' },
        { name: '评论管理', path: '#/comment/index' },
        { name: '文件管理', path: '#/file/index' },
        { name: '用户管理', path: '#/user/index' },
        { name: '访问统计', path: '#/view/index' },
        { name: '系统设置', path: '#/setting/index' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.navBar {
  width: 100%;
  height: 135px;
  background-color: #fff;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  div {
    flex: 1;
    display: flex;
    align-items: center;
    p {
      flex: 1;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
